import * as THREE from 'three';

// 基本概念：场景Scene、相机Camera、渲染器Renderer

// 定义相机渲染输出的画布尺寸
const width = 800;
const height = 500;

// 1、创建3D场景对象Scene
const scene = new THREE.Scene();

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 100);

// 实例化 WebGL 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置 threejs 渲染区域
renderer.setSize(window.innerWidth, window.innerHeight);

// 添加到 dom， renderer.domElement 实际上就是画布 canvas
const container = document.querySelector('#webgl');
container.appendChild(renderer.domElement);

// 创建一个长方体几何对象 Geometry
const boxGeometry = new THREE.BoxGeometry(10, 4, 6);
// 创建一个基础材质对象 Material
const basicMaterial = new THREE.MeshBasicMaterial({
  color: 0xff22ff,
  // wireframe: true, // 线框
  transparent: true, // 开启透明
  opacity: 0.4, // 透明度
});
// 创建网格模型对象 传入 几何体geometry、材质material
const mesh = new THREE.Mesh(boxGeometry, basicMaterial);
// 网格模型位置，默认原点
mesh.position.set(10, 0, 0);

// 相机位置
camera.position.set(20, 20, 20);
// 相机观察位置
camera.lookAt(mesh.position);

// 添加网格模型到场景
scene.add(mesh);

// 辅助观察坐标系
const axesHelper = new THREE.AxesHelper(50)
scene.add(axesHelper)

// 使用 requestAnimationFrame 渲染
const render = () => {
  requestAnimationFrame(render);

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;

  // 渲染
  renderer.render(scene, camera);
}
render();
